<script>
export default {
  created() {
    this.details_init()
  },
  data() {
    return {
      // 商品图
      img_list: [],
      default_img: '', //大图
      min_list: [], // 规格信息
      goodId: this.$route.query.goodId, // 商品id
      goods_one: {}, //商品信息
      spec_count: 0, //用于商品规格判断
      img_count: 0, // 控制图片选中计数器
      min_img: '', // 选择规格时的图片
      count: 0,
    }
  },
  methods: {
    // 查询单件商品信息
    async details_init() {
      const { data: res } = await this.$http.get(
        '/flower-goods/details_id/' + this.goodId
      )
      this.goods_one = res.data
      // 图片
      if (this.goods_one.goodsImg) {
        this.img_list = this.split_str(this.goods_one.goodsImg)
        this.default_img = this.img_list[0]
        this.min_img = this.default_img
      }
      // 规格
      if (this.goods_one.goodsSpec) {
        this.min_list = this.split_str(this.goods_one.goodsSpec)
        this.goods_one.goodsSpec = this.min_list[0]
      } else {
        this.spec_count++
      }
    },
    // 用户分割字符串
    split_str(str) {
      return str.split(',')
    },
    // 设置当鼠标滑过小图时显示大图
    mou_img(img, index) {
      this.default_img = img
      this.img_count = index
    },
    // 加入购物车
    async join_btn() {
      if (localStorage.getItem('userId')) {
        this.goods_one.userId = localStorage.getItem('userId') // 改变用户id为当前用户id
        const { data: res } = await this.$http.post(
          '/flower-shopping/join',
          this.goods_one
        )
        if (res.code == 1) {
          this.$message.success(res.data)
        } else {
          this.$message.error(res.msg)
        }
      } else {
        this.$message.error('请登录！')
        this.$router.push('/login')
      }
    },
    // 用户选择规格时改变我们自己的值
    spec_btn(item, index) {
      this.goods_one.goodsSpec = item
      this.count = index
    },
    // 直接购买商品
    pay_order() {
      if (localStorage.getItem('userId')) {
        this.$message.success("购买成功！")
        this.goods_one.userId = localStorage.getItem('userId') // 改变用户id为当前用户id
        this.$http.post('/flower-shopping/pay', this.goods_one)
        this.details_init()
      } else {
        this.$message.error('请登录！')
        this.$router.push('/login')
      }
    },
  },
}
</script>
<template>
  <div class="app">
    <section class="img_left">
      <div class="img_top">
        <img
          :src="$api + '/common/download/' + default_img"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img_bottom">
        <img
          v-for="(item, index) in img_list"
          :key="index"
          :src="$api + '/common/download/' + item"
          :style="{ marginLeft: item.id == 1 ? '10px' : '0' }"
          @mouseenter="mou_img(item, index)"
          class="img_Small"
          :class="{ img_selected: index == img_count }"
        />
      </div>
    </section>
    <section class="text_rigth">
      <div class="text_header">
        <h2>{{ goods_one.goodsName }}</h2>
        <span style="color: #ff471d">[{{ goods_one.goodsIllustrate }}]</span>
      </div>
      <div class="text_price">
        <label>售价：</label>
        <span style="color: red; font-weight: 700; font-size: 18px"
          >￥{{ goods_one.goodsPrice }}</span
        ><br />
        <span
          >已售<label style="color: red">{{ goods_one.goodsSold }}</label
          >件</span
        >
      </div>
      <div class="text_body">
        <table>
          <tr>
            <td>花语</td>
            <td>{{ goods_one.goodsFlowerLanguage }}</td>
          </tr>
          <tr>
            <td>材料</td>
            <td>
              {{ goods_one.goodsMaterial }}
            </td>
          </tr>
          <tr>
            <td>包装</td>
            <td>
              {{ goods_one.goodsPackage }}
            </td>
          </tr>
        </table>
        <span
          style="
            float: left;
            font-size: 14px;
            margin-top: 10px;
            margin-left: 10px;
          "
          ><span style="margin-right: 10px; font-size: 12px; color: #999"
            >配送说明</span
          >全国</span
        >
        <div class="div_after" v-if="spec_count != 1">
          <span class="after_span">选择</span>
          <div
            class="after_min"
            :class="{ after_hover: count == index }"
            v-for="(item, index) in min_list"
            :key="item"
            @click="spec_btn(item, index)"
          >
            <img class="min_img" :src="$api + '/common/download/' + min_img" />
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="div_button">
        <el-button type="danger" @click="join_btn()" plain
          ><h1>加入购物车</h1></el-button
        >
        <el-button type="danger" @click="pay_order()"
          ><h1>立即买购</h1></el-button
        >
      </div>
    </section>
    <footer style="font-size: 14px; color: #999">
      <span
        >晚云小卖铺终于获得了期待已久的许可证，这意味着他们可以正式开展业务了。这个许可证是他们长期努力的结果，也是他们对未来的坚定信念的证明。
        现在，他们可以开始策划各种营销活动，吸引更多的客户，提升店铺的知名度和影响力。
        同时，他们也可以放心地扩大经营范围，增加新的商品种类，以满足更多客户的需求。总的来说，这个许可证为晚云小卖铺带来了无尽的可能性和机遇。</span
      >
    </footer>
  </div>
</template>
<style lang="less" scoped>
@import url('@/views/css/details.less');
</style>
